<template>
  <div>
    <div class="top-img">
      <img src="@/assets/image/gateway/tuanwei/nbanner.jpg" alt="" class="img-pic">
      <div class="img-title">消防管理</div>
      <div class="img-text">专业的学校，探寻职业新路径</div>
    </div>

    <div class="menu-list">

      <div class="menu-item" :class="{'active': active == 1}" @click="active = 1">培训演练</div>
      <div class="menu-item" :class="{'active': active == 2}" @click="active = 2">安全巡检</div>
      <div class="menu-item" :class="{'active': active == 3}" @click="active = 3">消防设施</div>
      <div class="menu-item" :class="{'active': active == 4}" @click="active = 4">值班安排</div>
      <div class="menu-item" :class="{'active': active == 5}" @click="active = 5">值班情况</div>
    </div>
    <One v-if="active == 1 && isList" @changeStatus="isList = false" />
    <Two v-if="active == 2 && isList" @changeStatus="isList = false" />
    <Three v-if="active == 3 && isList" @changeStatus="isList = false" />
    <Four v-if="active == 4 && isList" @changeStatus="isList = false" />
    <Five v-if="active == 5 && isList" @changeStatus="isList = false" />
    <DetailContent v-if="!isList" @changeStatus="isList = true" />
    <PageFooter />
  </div>
</template>

<script>
  import PageFooter from "../components/footer/index.vue"
  import One from "./components/one.vue"
  import Two from "./components/two.vue"
  import Three from "./components/three.vue"
  import Four from "./components/four.vue"
  import Five from "./components/five.vue"

  import DetailContent from "./components/detail.vue"
  export default {
    data() {
      return {
        active: 1,
        isList: true
      }
    },
    components: {
      One,
      Two,
      Three,
      Four,
      Five,
      DetailContent,
      PageFooter
    },
    computed: {

    },
    methods: {

    }
  }
</script>

<style lang="scss" scoped>
  .top-img {
    position: relative;

    .img-pic {
      width: 100%;
    }

    .img-title {
      position: absolute;
      left: 190px;
      top: 48px;
      font-weight: bold;
      font-size: 36px;
      color: #FEFEFE;
    }

    .img-text {
      position: absolute;
      left: 189px;
      top: 122px;
      font-weight: 400;
      font-size: 22px;
      color: #FEFEFE;
    }
  }

  .menu-list {
    margin-top: 20px;
    display: flex;
    align-items: center;
    border-bottom: 2px solid #1D60B9;
    justify-content: center;

    .menu-item {
      font-size: 16px;
      color: rgba(51, 51, 51, 1);
      height: 58px;
      line-height: 58px;
      padding: 0 35px;
      border-radius: 10px 10px 0 0;
      margin-right: 10px;
      cursor: pointer;

      &:last-child {
        margin-right: 0;
      }

      &.active {
        background: #1D60B9;
        color: #ffffff;
        font-weight: bold;

      }
    }
  }

  .content-box {

    margin: 57px auto 0;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    padding-bottom: 40px;

    .box-title {}

    .box-center {
      margin-bottom: 20px;
    }
  }
</style>
